<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>管理收货地址</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_manager.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_shdz_835.css" type="text/css"/>

<%--    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"/>--%>
<%--    <script type="text/javascript" src="render/js/frontend/topNav.j/s"/>--%>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<!-- 面包屑 注意首页没有 -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="/render/myhome">个人中心</a>&nbsp;›&nbsp;
        <a href="/render/address">管理收货地址</a>
    </span>
</div>
<div class="clear"></div>
<!-- 面包屑 End -->
<!-- Header End -->

<!-- 我的个人中心 -->
<div class="shop_member_bd clearfix">
    <!-- 左边导航 -->
    <jsp:include page="common/myshop_left.jsp"></jsp:include>
    <!-- 左边导航 End -->

    <!-- 右边收货列表 -->
    <div class="shop_member_bd_right clearfix">

        <%--删除或新增--%>
        <div class="shop_meber_bd_good_lists clearfix">
            <div class="title">
                <h3>管理收货地址<a style="float:right;" href="javasrcipt:void(0);" id="new_add_shdz_btn">新增收货地址</a></h3>
            </div>
            <div class="clear"></div>
            <!-- 收货人地址 Title End -->
            <div class="shop_bd_shdz clearfix">
                <%--收货地址  start--%>
                <div class="shop_bd_shdz_lists clearfix">
                    <ul>
                        <c:forEach items="${shippings}" var="shipping">
                            <li class="${shipping.id}">
                                <label>
                                    <span><input type="radio" name="shdz" value="${shipping.id}"/></span>
                                </label>
                                <em class="province">${shipping.receiver_province}</em>
                                <em class="city">${shipping.receiver_city}</em>市
                                <em class="area">${shipping.receiver_address}</em>区
                                <em class="xiangxi">${shipping.receiver_district}</em>
                                <em class="name">${shipping.receiver_name}</em>(收)
                                <em class="dianhua">${shipping.receiver_mobile}</em>
                                <em class="youbian">${shipping.receiver_zip}</em>
                                <span class="admin_shdz_btn">
                                    <a href="javascript:void(0);" onclick="addressEdit('${shipping.id}',this);">编辑</a>
                                    <a href="javascript:void(0);" onclick="deleteById('/render/shipping/delete?id=${shipping.id}',${shipping.id});">删除</a>
                                </span>
                            </li class="${shipping.id}">
                            <div id="${shipping.id}" style="display:none;" class="shop_bd_shdz_new clearfix">
                                <div class="title">修改收货地址</div>
                                <from>
                                    <a href="render/address" style="display:none;">
                                        <span id="buy_link_btn"></span>
                                    </a>
                                    <div class="shdz_new_form">
                                        <span style="visibility:hidden" class="user_id">${user.id}</span>
                                        <ul>
                                        <li>
                                            <label><span>*</span>收货人姓名：</label>
                                            <input type="text" class="name" value="${shipping.receiver_name}"/>
                                            <span><a style="color:red;">*</a>以数字或者字母开头并且位数在2-5位或者2-5位的中文</span>
                                        </li>
                                        <li>
                                            <label><span>*</span>所在地址：</label>
                                            省:<input name="province" class="province" value="${shipping.receiver_province}">
                                            市:<input name="city" class="city" value="${shipping.receiver_city }">
                                            区:<input name="area" class="area" value="${shipping.receiver_address}">
                                        </li>
                                        <li>
                                            <label><span>*</span>详细地址：</label>
                                            <input name="address" type="text"  class="xiangxi" value="${shipping.receiver_district}"/>
                                        </li>
                                        <li>
                                            <label><span></span>邮政编码：</label>
                                            <input type="text" name="code" class="youbian" value="${shipping.receiver_zip}"/>
                                            <span><a style="color:red;">*</a>6位的数字</span>
                                        </li>
                                        <li>
                                            <label><span></span>电话：</label>
                                            <input type="text" name="phone" class="dianhua" value="${shipping.receiver_mobile}"/>
                                            <span><a style="color:red;">*</a>匹配位数为11位的数字</span>
                                        </li>
                                        <%--<li>
                                            <label><span></span>手机号：</label>
                                            <input name="telephone" type="text" class="shouji" value="${shipping.receiver_mobile}"/>
                                        </li>--%>
                                        <li><label>&nbsp;</label><input onclick="editAddress(${shipping.id})" type="submit" value="修改收货地址"/></li>
                                    </ul>
                                    </div>
                                </from>
                            </div>
                        </c:forEach>
                    </ul>
                </div>
                <%--收货地址  end--%>
                <!-- 新增收货地址 -->
                <div id="new_add_shdz_contents" style="display:none;" class="shop_bd_shdz_new clearfix">
                    <div class="title">新增收货地址</div>
                    <form id="form_address">
                        <span style="visibility:hidden" class="user_id">${user.id}</span>
                        <div class="shdz_new_form">
                            <ul>
                                <li>
                                    <label><span>*</span>收货人姓名：</label>
                                    <input name="name" type="text" class="name"/>
                                    <span><a style="color:red;">*</a>以数字或者字母开头并且位数在2-5位或者2-5位的中文</span>
                                </li>
                                <li>
                                    <label><span>*</span>所在地址：</label>
                                    省:<input name="province" class="province">
                                    市:<input name="city" class="city">
                                    区:<input name="area" class="area">
                                </li>
                                <li>
                                    <label><span>*</span>详细地址：</label>
                                    <input name="address" type="text"  class="xiangxi"/>
                                </li>
                                <li>
                                    <label><span></span>邮政编码：</label>
                                    <input type="text" name="code" class="youbian"/>
                                    <span><a style="color:red;">*</a>6位的数字</span>
                                </li>
                                <li>
                                    <label><span></span>电话：</label>
                                    <input type="text" name="phone" class="dianhua"/>
                                    <span><a style="color:red;">*</a>匹配位数为11位的数字</span>
                                </li>
                                <%--<li>
                                    <label><span></span>手机号：</label>
                                    <input name="telephone" type="text" class="shouji"/>
                                </li>--%>
                                <li>
                                    <label>&nbsp;</label>
                                    <input onclick="submitFormAddress()" type="button" value="增加收货地址"/>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
                <!-- 新增收货地址 End -->
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- 右边购物列表 End -->
</div>
<!-- 我的个人中心 End -->

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>

<!-- Footer End -->
<script type="text/javascript">
    var b=true;
    var content = "";

    $(function () {
        $("#new_add_shdz_btn").click(function () {
            if (!b){
                $("#new_add_shdz_contents").hide(500);
                $("#new_add_shdz_btn").text("新增地址");
                b=true;
            }else {
                $("#new_add_shdz_contents").show(500);
                $("#new_add_shdz_btn").text("收起");
                b=false;
            }
        });
    });

    function addressEdit(id,obj) {
        if (!b){
            $('#'+id).hide(500);
            $(obj).text("编辑");
            b=true;
        }else {
            $('#'+id).show(500);
            $(obj).text("收起");
            b=false;
        }
    }

    function submitFormAddress() {
        HFconfirm({title:'确认提交', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
            if ($('#form_address').find(".name").val() == null||$('#form_address').find(".name").val()=='') {
                HFalert({title: "名字不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#form_address').find(".province").val() == null||$('#form_address').find(".province").val()=='') {
                HFalert({title: "省份不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#form_address').find(".city").val() == null||$('#form_address').find(".city").val()=='') {
                HFalert({title: "城市不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#form_address').find(".area").val() == null||$('#form_address').find(".area").val()=='') {
                HFalert({title: "区域不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#form_address').find(".xiangxi").val() == null||$('#form_address').find(".xiangxi").val()=='') {
                HFalert({title: "详情不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#form_address').find(".dianhua").val() == null||$('#form_address').find(".dianhua").val()=='') {
                HFalert({title: "电话不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            /*if ($('#form_address').find(".youbian").val() == null||$('#form_address').find(".youbian").val()=='') {
                HFalert({title: "邮箱不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }*/
            /*匹配以数字或者字母开头并且位数在2-5位或者2-5位的中文*/
            var regName =  /(^[a-zA-Z0-9]{2,5}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
            if(!regName.test($('#form_address').find(".name").val())){
                HFalert({title:"名字输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }

            /*匹配位数为11位的数字*/
            var dianhua = /(^[0-9]{11,11}$)/;
            if(!dianhua.test($('#form_address').find(".dianhua").val())){
                HFalert({title:"联系方式输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }

            var youbian= /[1-9]{1}(\d+){5}/;
            if(!youbian.test($('#form_address').find(".youbian").val())){
                HFalert({title:"邮编输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }

            /*var youbian= /(^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$)/;
            if(!youbian.test($('#form_address').find(".youbian").val())){
                HFalert({title:"邮箱输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }*/
            var url = '/render/shipping/addressAdd';
            $.ajax({
                type: 'post',
                url: url,
                data: {
                    'name': $('#form_address').find(".name").val(),
                    'province': $('#form_address').find(".province").val(),
                    'city': $('#form_address').find(".city").val(),
                    'area': $('#form_address').find(".area").val(),
                    'xiangxi': $('#form_address').find(".xiangxi").val(),
                    'dianhua': $('#form_address').find(".dianhua").val(),
                    'youbian': $('#form_address').find(".youbian").val()
                },
                success: function (data) {
                    if (data.success) {
                        $("#new_add_shdz_contents").hide(500);
                        b = true;
                        $("#buy_link_btn").click();
                        HFalert({title: data.message, type: 'success', confirmButtonText: '确定'});
                    } else {
                        HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        }});
    }

    function editAddress(id) {
        HFconfirm({title:'确认编辑', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
            if ($('#' + id).find(".name").val() == null||$('#' + id).find(".name").val()=='') {
                HFalert({title: "名字不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#' + id).find(".province").val() == null||$('#' + id).find(".province").val()=='') {
                HFalert({title: "省份不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#' + id).find(".city").val() == null||$('#' + id).find(".city").val()=='') {
                HFalert({title: "城市不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#' + id).find(".area").val() == null||$('#' + id).find(".area").val()=='') {
                HFalert({title: "区域不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#' + id).find(".xiangxi").val() == null||$('#' + id).find(".xiangxi").val()=='') {
                HFalert({title: "详情不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#' + id).find(".dianhua").val() == null||$('#' + id).find(".dianhua").val()=='') {
                HFalert({title: "电话不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }
            if ($('#' + id).find(".youbian").val() == null||$('#' + id).find(".youbian").val()=='') {
                HFalert({title: "邮箱不能为空", type: 'success', confirmButtonText: '确定'});
                return;
            }

            /*匹配以数字或者字母开头并且位数在2-5位或者2-5位的中文*/
            var regName =  /(^[a-zA-Z0-9]{2,5}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
            if(!regName.test($('#' + id).find(".name").val())){
                HFalert({title:"名字输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }

            /*匹配位数为11位的数字*/
            var dianhua = /(^[0-9]{11,11}$)/;
            if(!dianhua.test($('#' + id).find(".dianhua").val())){
                HFalert({title:"联系方式输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }

            var youbian= /[1-9]{1}(\d+){5}/;
            if(!youbian.test($('#' + id).find(".youbian").val())){
                HFalert({title:"邮编输入不符合要求", type: 'warning', confirmButtonText: '确定'});
                return;
            }
            var url = '/render/shipping/addressEdit';
            $.ajax({
                type: 'post',
                url: url,
                data: {
                    'id': id,
                    'name': $('#' + id).find(".name").val(),
                    'province': $('#' + id).find(".province").val(),
                    'city': $('#' + id).find(".city").val(),
                    'area': $('#' + id).find(".area").val(),
                    'xiangxi': $('#' + id).find(".xiangxi").val(),
                    'dianhua': $('#' + id).find(".dianhua").val(),
                    'youbian': $('#' + id).find(".youbian").val()
                },
                success: function (data) {
                    if (data.success) {
                        $('#' + id).hide(500);
                        b = true;
                        $('.' + id).find('.name').text($('#' + id).find(".name").val());
                        $('.' + id).find('.province').text($('#' + id).find(".province").val());
                        $('.' + id).find('.city').text($('#' + id).find(".city").val());
                        $('.' + id).find('.area').text($('#' + id).find(".area").val());
                        $('.' + id).find('.xiangxi').text($('#' + id).find(".xiangxi").val());
                        $('.' + id).find('.dianhua').text($('#' + id).find(".dianhua").val());
                        $('.' + id).find('.youbian').text($('#' + id).find(".youbian").val());
                        // HFalert({title: data.message, type: 'success', confirmButtonText: '确定'});
                        window.location.href="/render/address";
                    } else {
                        HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        }});
    }

    function deleteById(url,id) {
        HFconfirm({title:'确认删除', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
            $.ajax({
                type: 'post',
                url: url,
                success: function (data) {
                    if (data.success) {
                        // addressList($(".user_id").text());
                        $('#' + id).remove();
                        $('.' + id).remove();
                    } else {
                        HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        }});
    }

</script>
</body>
</html>